<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IndexedDB + Vue 任务管理</title>

    <!-- 引入 Vue 2.7 -->
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>

    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />

    <!-- 引入 Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>
  <body>
    <div id="app">
      <el-container>
        <el-header>
          <h1>{{ title }}</h1>
        </el-header>

        <el-main>
          <el-button type="primary" @click="initDB">初始化数据库</el-button>
          <el-input v-model="taskInput" placeholder="输入任务名称" style="margin: 10px 0"></el-input>
          <el-button type="success" @click="addTask">添加任务</el-button>
          <el-button type="info" @click="loadTasks">加载任务列表</el-button>

          <el-table :data="tasks" style="width: 100%; margin-top: 20px" border>
            <el-table-column prop="name" label="任务名称" width="300"></el-table-column>
            <el-table-column prop="created" label="创建时间"></el-table-column>
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-button type="danger" size="mini" @click="deleteTask(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>

        <el-footer>
          <p style="text-align: center">IndexedDB 任务管理系统</p>
        </el-footer>
      </el-container>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          title: 'IndexedDB + Vue 任务管理',
          dbName: 'TaskDatabase', // 数据库名称
          storeName: 'Tasks', // 对象存储名称
          db: null, // 数据库实例
          taskInput: '', // 输入框绑定值
          tasks: [] // 任务列表
        },
        methods: {
          // 初始化数据库
          initDB() {
            const request = indexedDB.open(this.dbName, 1)

            request.onupgradeneeded = (event) => {
              this.db = event.target.result
              if (!this.db.objectStoreNames.contains(this.storeName)) {
                this.db.createObjectStore(this.storeName, { keyPath: 'id', autoIncrement: true })
              }
              this.$message.success('数据库初始化成功')
            }

            request.onsuccess = (event) => {
              this.db = event.target.result
              this.$message.success('数据库连接成功')
            }

            request.onerror = (event) => {
              this.$message.error('数据库连接失败')
              console.error('数据库连接失败', event)
            }
          },

          // 添加任务
          addTask() {
            if (!this.taskInput.trim()) {
              this.$message.warning('请输入任务名称')
              return
            }

            const transaction = this.db.transaction(this.storeName, 'readwrite')
            const store = transaction.objectStore(this.storeName)
            const task = { name: this.taskInput, created: new Date().toISOString() }

            const request = store.add(task)

            request.onsuccess = () => {
              this.$message.success('任务添加成功')
              this.taskInput = ''
              this.loadTasks()
            }

            request.onerror = (event) => {
              this.$message.error('任务添加失败')
              console.error('任务添加失败', event)
            }
          },

          // 加载任务
          loadTasks() {
            const transaction = this.db.transaction(this.storeName, 'readonly')
            const store = transaction.objectStore(this.storeName)
            const request = store.getAll()

            request.onsuccess = (event) => {
              this.tasks = event.target.result
            }

            request.onerror = (event) => {
              this.$message.error('加载任务失败')
              console.error('加载任务失败', event)
            }
          },

          // 删除任务
          deleteTask(taskId) {
            const transaction = this.db.transaction(this.storeName, 'readwrite')
            const store = transaction.objectStore(this.storeName)
            const request = store.delete(taskId)

            request.onsuccess = () => {
              this.$message.success('任务删除成功')
              this.loadTasks()
            }

            request.onerror = (event) => {
              this.$message.error('任务删除失败')
              console.error('任务删除失败', event)
            }
          }
        }
      })
    </script>
  </body>
</html>
